<template>
  <el-card>
    <template #header>
      <el-row :gutter="10" style="float: right">
        <el-button
          v-if="buttonShow == '1'"
          plain
          type="warning"
          @click="addSubdataset"
          >添加子数据集</el-button
        >
        <el-button v-if="buttonShow == '1'" plain type="primary" @click="add"
          >修 改</el-button
        >
        <el-button v-if="buttonShow == '2'" plain type="primary" @click="add"
          >添 加</el-button
        >
      </el-row>
    </template>
  </el-card>
  <el-scrollbar :height="h">
    <el-form style="margin-top: 20px" :model="form" label-position="left">
      <ts-card header="基础设置" style="margin-top: 10px">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="父数据表ID">
              <span>{{ form.parentTableId }}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="数据表id">
              <el-input v-model="form.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="名称">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="表关联类型">
              <el-select
                v-model="form.relationType"
                clearable
                placeholder="请选择："
              >
                <el-option
                  v-for="item in configData.relationTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="每条记录名">
              <el-input v-model="form.recordKey" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="是否为根节点数据">
              <el-switch v-model="form.rootData" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="是否为斑马表格">
              <el-switch v-model="form.stripe"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="树状属性">
              <el-input v-model="form.treeProps"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="树状key值">
              <el-input v-model="form.rowKey"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="父节点字段名">
              <el-input v-model="form.treeParentField" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="添加空数据节点">
              <el-switch
                v-model="form.appendEmptyNode"
                active-value="1"
                inactive-value="0"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="空数据节点值">
              <el-input v-model="form.emptyNodeValue"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="懒加载">
              <el-switch v-model="form.lazy" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="主键字段名">
              <el-input v-model="form.primaryKey" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="关联属性名称">
              <el-input v-model="form.mainTableSubListProp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="加载数据服务名">
              <el-input v-model="form.loadDataService"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="是否需要翻页">
              <el-switch v-model="needPage" @change="form.page = {}" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="默认每页大小">
              <el-input v-model="form.page.page" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="每页大小数组">
              <el-input v-model="form.page.pageSize" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="添加行编辑模板">
              <sc-form-table
                v-model="addRecordTemplate"
                :addTemplate="recordAddTemplate"
                height="300"
              >
                <el-table-column label="字段名">
                  <template #default="scope">
                    <el-select
                      v-model="scope.row.key"
                      clearable
                      placeholder="请选择："
                    >
                      <el-option
                        v-for="item in form.columns"
                        :key="item.prop"
                        :label="item.label"
                        :value="item.prop"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="值">
                  <template #default="scope">
                    <el-input v-model="scope.row.value"></el-input>
                  </template>
                </el-table-column>
              </sc-form-table>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="排序设置">
              <sc-form-table
                v-model="form.sortFields"
                :addTemplate="sortFieldsTemplate"
                height="300"
                dragSort
              >
                <el-table-column label="字段名">
                  <template #default="scope">
                    <el-select
                      v-model="scope.row.prop"
                      clearable
                      placeholder="请选择："
                    >
                      <el-option
                        v-for="item in form.columns"
                        :key="item.prop"
                        :label="item.label"
                        :value="item.prop"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="排序方式">
                  <template #default="scope">
                    <el-select
                      v-model="scope.row.order"
                      clearable
                      placeholder="请选择："
                    >
                      <el-option
                        v-for="item in orderList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.prop"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
              </sc-form-table>
            </el-form-item>
          </el-col>
        </el-row>
      </ts-card>
      <ts-card header="数据集对象设置" style="margin-top: 10px">
        <dataSet
          v-model:formData="form.dataset"
          :configData="configData"
          :tableId="form.id"
          referType="tableData"
          @add-column-list="addColumns"
        ></dataSet>
      </ts-card>
      <ts-card header="字段列表" style="margin-top: 10px">
        <el-table
          ref="table"
          :data="form.columns"
          :key="toggleIndex"
          @cell-click="cellMouseEnter"
        >
          <el-table-column label="" width="58">
            <template #default>
              <el-tag class="move" style="cursor: move">
                <DCaret style="width: 1em; height: 1em" />
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="label" label="名称">
            <template #default="scope">
              <span v-if="!scope.row.labelShow" @click="cellClick(scope.row)">{{
                scope.row.label
              }}</span>
              <el-input
                v-else
                v-model="scope.row.label"
                @blur="labelCellBlur(scope.row)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="字段名"></el-table-column>
          <el-table-column prop="fixed" label="固定列"></el-table-column>
          <el-table-column prop="columnType" label="列类型"></el-table-column>
          <el-table-column prop="width" label="宽度"></el-table-column>
          <el-table-column label="宽度是否计算">
            <template #default="scope">
              <el-switch
                v-model="scope.row.flexColumnWidth"
                disabled
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="align" label="排列位置"></el-table-column>
          <el-table-column prop="formatter" label="格式化"></el-table-column>
        </el-table>
      </ts-card>
    </el-form>
  </el-scrollbar>
</template>
<script setup>
import {
  ref,
  defineModel,
  onMounted,
  computed,
  nextTick,
  onBeforeMount,
} from "vue";
import { Plus, Delete, DCaret, Edit } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import { deepClone } from "@/utils/arr";
import Sortable from "sortablejs";
import API from "@/api/model/report.js";
import dataSet from "./dataSet.vue";
import tool from "../utils/tool";
const h = computed(() => {
  var elementHeight = document.querySelector(".el-main").offsetHeight;
  return elementHeight + "px";
});
const props = defineProps({
  fileName: { type: String, default: "" },
});
const table = ref(null);
const toggleIndex = ref(0);
const form = defineModel("formData");
const dataList = ref([]);
const buttonShow = ref("1");
const configData = ref([]);
const addRecordTemplate = ref([]);
const needPage = ref(false);
const recordAddTemplate = {
  key: "",
  value: "",
};
const sortFieldsTemplate = {
  prop: "",
  order: "",
};
const orderList = [
  { label: "升序", value: "ascending" },
  { label: "降序", value: "descending" },
];
onMounted(() => {
  if (!form.value.id) {
    buttonShow.value = "2";
  }
  addRecordTemplate.value = deepClone(
    form.value.addRecordTemplate
      ? tool.convert.mapToArr(form.value.addRecordTemplate)
      : []
  );
  getInit();
  rowDrop();
});
const rowDrop = () => {
  const tbody = table.value.$el.querySelector(".el-table__body-wrapper tbody");
  Sortable.create(tbody, {
    handle: ".move",
    animation: 300,
    ghostClass: "ghost",
    onEnd({ newIndex, oldIndex }) {
      const tableData = form.value.columns;
      const currRow = tableData.splice(oldIndex, 1)[0];
      tableData.splice(newIndex, 0, currRow);
      toggleIndex.value += 1;
      nextTick(() => {
        rowDrop();
      });
    },
  });
};
const getInit = async () => {
  let res = await API.tableAdd.post({ fileName: props.fileName });
  if (res.code == 200) {
    configData.value = res.configData;
  }
};
const addSubdataset = async () => {
  if (form.value.id == "") {
    ElNotification.warning({ message: "父数据集id为空", duration: 2000 });
  }
  buttonShow.value = "2";
  let res = await API.tableAdd.post({
    fileName: props.fileName,
    parentTableId: form.value.id,
  });
  if (res.code == 200) {
    configData.value = res.configData;
    if (!res.dtl.dataset) {
      res.dtl.dataset = {};
    }
    if (res.dtl.page !== null) {
      res.dtl.page.pageSize = res.dtl.page.pageSize.toString();
    } else {
      res.dtl.page = { page: "", pageSize: "" };
    }
    form.value = res.dtl;
  }
};
const cellClick = (val) => {
  val.labelShow = true;
};
const labelCellBlur = (val) => {
  val.labelShow = false;
};
const addColumns = (val) => {
  dataList.value = val;
};
const add = async () => {
  let formData = deepClone(form.value);
  formData.addRecordTemplate = tool.convert.arrToMap(addRecordTemplate.value);
  if (formData.dataset) {
    formData.dataset.injectionConditionMap = tool.convert.arrToMap(
      formData.dataset.injectionConditionMap
    );
  }
  formData.page.pageSize = formData.page.pageSize.split(",");
  let params = {
    fileName: props.fileName,
    bean: formData,
    dataList: dataList.value.concat(form.value.columns),
  };
  let res = await API.saveOrUpdate.post(params);
  if (res.code == 200) {
    ElNotification.success({ title: "修改成功", duration: 2000 });
  }
};
</script>
<style lang="less" scoped>
.buttonGroup {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 48px;
  justify-content: flex-end;
  margin-bottom: 12px;
  padding: 10px 16px;
  font-size: 12px;
  list-style-type: none;
  text-align: left;
  background-color: #ffffff;
}
</style>